﻿define(function (require, exports, module) {
    var Canvas = require('util/canvas');
    var ImageStorage = require('util/imageStorage');
    var Config = require('util/config');

    var m_imageWithBoxOptions = [{
        id: 'enterLeft', x: 56, image: Config.images.ENTER_ROLE
    }, {
        id: 'newLeft', x: 116, image: Config.images.NEW_ROLE
    }, {
        id: 'deleteLeft', x: 186, image: Config.images.DELETE_ROLE
    }, {
        id: 'enterRight', x: 360, image: Config.images.ENTER_ROLE
    }, {
        id: 'newRight', x: 420, image: Config.images.NEW_ROLE
    }, {
        id: 'deleteRight', x: 490, image: Config.images.DELETE_ROLE
    }];
    var m_textOptions = [
        { id: 'nameLeft', x: 133, y: 130, width: 100, align: 'left' },
        { id: 'levelLeft', x: 105, y: 155 },
        { id: 'bloodLeft', x: 105, y: 177 },
        { id: 'atkLeft', x: 105, y: 199 },
        { id: 'defLeft', x: 105, y: 221 },
        { id: 'speedLeft', x: 105, y: 243 },
        { id: 'charmLeft', x: 105, y: 265 },
        { id: 'dpLeft', x: 195, y: 265, width: 50 },
        { id: 'loginCountLeft', x: 167, y: 287 },
        { id: 'nameRight', x: 436, y: 130, width: 100, align: 'left' },
        { id: 'levelRight', x: 408, y: 155 },
        { id: 'bloodRight', x: 408, y: 177 },
        { id: 'atkRight', x: 408, y: 199 },
        { id: 'defRight', x: 408, y: 221 },
        { id: 'speedRight', x: 408, y: 243 },
        { id: 'charmRight', x: 408, y: 265 },
        { id: 'dpRight', x: 498, y: 265, width: 50 },
        { id: 'loginCountRight', x: 470, y: 287 }
    ];
    var m_headSettings = [
        { side: 'Left', x: 136 },
        { side: 'Right', x: 440 }
    ];

    exports.renderAsync = eval(Wind.compile('async', function () {
        Canvas.clear();

        var bgLayer = Canvas.createLayer();
        var bgImage = $await(Canvas.createImageAsync({ image: Config.images.SELECT_ROLE_BG }));
        bgLayer.add(bgImage);
        Canvas.add(bgLayer);

        var infoLayer = Canvas.createLayer();
        for (var i = 0, settings; settings = m_headSettings[i]; i++) {
            var options = { x: settings.x, y: 48, width: 64, height: 72 };
            var headImage = Canvas.createImage($.extend({ id: 'head' + settings.side }, options));
            infoLayer.add(headImage);
            var expressionUpImage = Canvas.createImage($.extend({ id: 'expressionUp' + settings.side }, options));
            infoLayer.add(expressionUpImage);
            var expressionDownImage = Canvas.createImage($.extend({ id: 'expressionDown' + settings.side }, options));
            infoLayer.add(expressionDownImage);
        }

        for (var i = 0; i < 20; i++) {
            var propertyImage = Canvas.createImage({ id: i, width: 12, height: 10 });
            infoLayer.add(propertyImage);
        }

        for (var i = 0, options; options = m_textOptions[i]; i++) {
            var text = Canvas.createText($.extend({
                fontSize: 11, width: 24, align: 'right', shadowColor: 'black', shadowBlur: 1, shadowOffset: 1
            }, options));
            infoLayer.add(text);
        }
        Canvas.add(infoLayer);

        var operatingLayer = Canvas.createLayer();
        for (var i = 0, options; options = m_imageWithBoxOptions[i]; i++) {
            var image = $await(Canvas.createImageWithBoxAnimationAsync($.extend({ y: 330, visible: false }, options)));
            operatingLayer.add(image);
        }
        var backImage = $await(Canvas.createImageWithBoxAnimationAsync({ id: 'backToLogin', image: Config.images.BACK_1, x: 276, y: 421 }));
        operatingLayer.add(backImage);
        Canvas.add(operatingLayer);
    }));
});